Angular Material-এর <mat-tab-group> এবং <mat-tab> কম্পোনেন্ট ব্যবহার করে আপনি খুব সহজেই ট্যাবড ন্যাভিগেশন তৈরি করতে পারেন। এটি অ্যাঙ্গুলার অ্যাপ্লিকেশনের জন্য একটি সুন্দর, আধুনিক, এবং ব্যবহারকারী-বান্ধব নেভিগেশন তৈরি করার একটি জনপ্রিয় উপায়।

ট্যাবড ন্যাভিগেশন ব্যবহারকারীদের একাধিক ভিউ বা কনটেন্টের মধ্যে সুইচ করার সুযোগ দেয়, যা অ্যাপ্লিকেশনটির অভ্যন্তরীণ নেভিগেশনকে আরও সহজ ও কার্যকরী করে তোলে।

ট্যাবড ন্যাভিগেশন তৈরি করার ধাপ

১. মডিউল ইমপোর্ট করা

প্রথমে, Angular Material-এর MatTabsModule ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে করতে হবে।

import { MatTabsModule } from '@angular/material/tabs';

@NgModule({
  imports: [
    MatTabsModule
  ]
})
export class AppModule { }

২. HTML টেমপ্লেটে ট্যাব তৈরি করা

এখন <mat-tab-group> এবং <mat-tab> কম্পোনেন্ট ব্যবহার করে ট্যাবগুলো তৈরি করা যাবে। এখানে প্রতিটি <mat-tab> একটি ট্যাব, এবং <mat-tab-group> কম্পোনেন্টটি তাদেরকে গ্রুপ করে রাখে।

<mat-tab-group>
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
  <mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>

এখানে, label অ্যাট্রিবিউটটি ট্যাবের ট্যাগ নাম (যেমন, "Tab 1", "Tab 2") নির্ধারণ করে এবং প্রতিটি ট্যাবের কন্টেন্টের মধ্যে যেকোনো HTML কন্টেন্ট রাখতে পারেন।

৩. টাইপস্ক্রিপ্টে ট্যাব সিলেকশন ট্র্যাক করা

আপনি চাইলে selectedIndex প্রপার্টি ব্যবহার করে সিলেক্ট করা ট্যাব ট্র্যাক করতে পারেন। যেমন, আপনি যদি চান যে ডিফল্টভাবে দ্বিতীয় ট্যাব সিলেক্ট হয়ে থাকুক, তাহলে selectedIndex ব্যবহার করতে হবে।

<mat-tab-group [selectedIndex]="selectedTabIndex">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
  <mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>

টাইপস্ক্রিপ্ট:

export class AppComponent {
  selectedTabIndex: number = 1;  // ডিফল্টভাবে দ্বিতীয় ট্যাব সিলেক্ট
}

এখানে, selectedTabIndex এর মান পরিবর্তন করে আপনি যেকোনো ট্যাবকে ডিফল্টভাবে সিলেক্ট করতে পারেন।

৪. ট্যাবের মধ্যে ডাইনামিক কন্টেন্ট

আপনি যেকোনো ট্যাবের কন্টেন্টের মধ্যে ডাইনামিক কন্টেন্ট রাখতে পারেন, যেমন ফর্ম, লিস্ট, অথবা অন্যান্য কম্পোনেন্ট।

<mat-tab-group>
  <mat-tab label="User Info">
    <app-user-info></app-user-info>
  </mat-tab>
  <mat-tab label="Settings">
    <app-settings></app-settings>
  </mat-tab>
  <mat-tab label="History">
    <app-history></app-history>
  </mat-tab>
</mat-tab-group>

এখানে, app-user-info, app-settings, এবং app-history নামক কাস্টম কম্পোনেন্টগুলো ট্যাব কন্টেন্ট হিসেবে ব্যবহার করা হয়েছে।

৫. ট্যাব সিলেকশনের উপর অ্যাকশন গ্রহণ করা

আপনি ট্যাব সিলেকশন পরিবর্তন করার সময় কোনো অ্যাকশন ট্রিগার করতে চাইলে selectedTabChange ইভেন্ট ব্যবহার করতে পারেন।

<mat-tab-group (selectedTabChange)="onTabChange($event)">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
  <mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>

টাইপস্ক্রিপ্ট:

export class AppComponent {
  onTabChange(event: any) {
    console.log('Tab changed to index: ', event.index);
  }
}

এখানে, selectedTabChange ইভেন্টের মাধ্যমে আপনি সিলেক্ট করা ট্যাবের ইনডেক্স ট্র্যাক করতে পারবেন এবং এর উপর ভিত্তি করে কোনো কার্যক্রম গ্রহণ করতে পারবেন।

ট্যাবড ন্যাভিগেশন কাস্টমাইজেশন

১. ট্যাব স্টাইল কাস্টমাইজ করা

আপনি ট্যাবের স্টাইল কাস্টমাইজ করতে CSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ, ট্যাবের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা:

mat-tab-group {
  background-color: #f0f0f0;
}

mat-tab {
  color: #3f51b5;
}

mat-tab-label {
  font-weight: bold;
}

২. ডাইনামিক ট্যাব তৈরি করা

আপনি যদি ট্যাবগুলোর সংখ্যা ডাইনামিকভাবে পরিবর্তন করতে চান, তাহলে ট্যাবগুলো একটি লিস্টের মাধ্যমে রেন্ডার করতে পারেন। এখানে একটি উদাহরণ:

<mat-tab-group>
  <mat-tab *ngFor="let tab of tabs" [label]="tab.label">
    {{ tab.content }}
  </mat-tab>
</mat-tab-group>

টাইপস্ক্রিপ্ট:

export class AppComponent {
  tabs = [
    { label: 'Tab 1', content: 'Content for Tab 1' },
    { label: 'Tab 2', content: 'Content for Tab 2' },
    { label: 'Tab 3', content: 'Content for Tab 3' }
  ];
}

এখানে, *ngFor ডিরেকটিভ ব্যবহার করে একটি লিস্টের মাধ্যমে ট্যাবগুলো ডাইনামিকভাবে রেন্ডার করা হয়েছে।

Angular Material এর ট্যাবড ন্যাভিগেশন একটি অত্যন্ত কার্যকরী উপায় যা অ্যাপ্লিকেশনের মধ্যে একাধিক পৃষ্ঠা বা ভিউ সুইচ করতে সহায়তা করে। এটি ব্যবহারকারীকে একটি সুষ্ঠু ও ইন্টারেক্টিভ নেভিগেশন অভিজ্ঞতা প্রদান করে। MatTabGroup এবং MatTab কম্পোনেন্ট ব্যবহার করে আপনি সহজেই ট্যাবড নেভিগেশন তৈরি করতে পারেন এবং বিভিন্ন কাস্টমাইজেশন যেমন স্টাইলিং, ডাইনামিক কন্টেন্ট, ট্যাব সিলেকশন ট্র্যাকিং ইত্যাদি করতে পারেন।